import Taro from '@tarojs/taro'
import { useEffect, useState } from 'react'
import { getPlan } from '@/apis/plan'
import { View, Image } from '@tarojs/components'
import styles from './index.module.scss'
import TrainingCard from './components/TrainingCard'
import DoctorBrief from './components/DoctorBrief'

import iconList from '@/static/icons/view-list.svg'
import imgTrain1 from '@/static/fake/train1.png'
import imgDoctorAvatar from '@/static/fake/doctor-avatar.png'

interface PlanItem {
    id: number // 计划id
    planname: string // 计划名称
    flexibility: string // 关节灵活度
    duration: string // 训练时长
}

export default function Index() {
    const [planList, setPlanList] = useState<PlanItem[]>([])

    const handleClickToTrain = (i) => {
        Taro.preload(planList[i])
        Taro.navigateTo({
            url: '/subPages/rehabDetail/index',
        })
    }

    const getPlanList = async () => {
        const res = await getPlan()
        setPlanList(res.data)
    }

    useEffect(() => {
        getPlanList()
    }, [])

    return (
        <View>
            <View className={styles.title}>
                <View className={styles.titleIconLeft}>
                    <Image className='icon' src={iconList} />
                </View>
                <View className={styles.titleText}>今日训练计划</View>
            </View>
            {/* 训练卡片 */}
            {planList.length !== 0 &&
                planList.map((item, i) => {
                    return (
                        <View
                            key={item.id}
                            className={styles.rehabCard}
                            onClick={() => handleClickToTrain(i)}
                        >
                            <TrainingCard
                                completionCount={0}
                                totalTime={item.duration}
                                flexibility={`0°-${item.flexibility}°`}
                                name={item.planname}
                                imgUrl={imgTrain1}
                            />
                            <DoctorBrief
                                name='敖医师'
                                projectName='中期康复训练计划'
                                trainType='被动训练'
                                avatarUrl={imgDoctorAvatar}
                            />
                        </View>
                    )
                })}
        </View>
    )
}
